@import "_variables";

@mixin desktop-only {
	@media only screen and (min-width: $mobile-breakpoint + 1) {
		@content;
	}
}

@mixin large-screen-only {
	@media only screen and (min-width: 1201px) {
		@content;
	}
}

@mixin small-screen-only {
	@media only screen and (max-width: 1200px) {
		@content;
	}
}

@mixin mobile-only {
	@media only screen and (max-width: $mobile-breakpoint) {
		@content;
	}
}

@mixin button {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 40px;
  padding: 8px 21px;
  font-weight: 500;

  &:hover {
    background: #E9ECEF;
  }

  &:active {
    background: darken(#E9ECEF, 5%);
  }

  @include dark-mode {
    background: rgba(255, 255, 255, 0.1);

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }

		&:active {
      background: rgba(255, 255, 255, 0.3);
		}
  }
}

@mixin transition-timing {
	transition-duration: 200ms;
	transition-timing-function: cubic-bezier(0.57, 0.33, 0.19, 0.97);
}

@mixin dark-mode {
	@at-root :root[data-theme='dark'] #{if(&, "&", "")} {
		@content;
	}

	@media (prefers-color-scheme: dark) {
		@at-root :root[data-theme='auto'] #{if(&, "&", "")} {
			@content;
		}
	}
}
